<template>
  <el-dialog
    :visible.sync="visible"
    title="📊 数据详情"
    width="600px"
    :modal="true"
    @close="handleClose"
  >
    <div v-if="data" class="popup-content">
      <div class="metric-row">
        <span class="label">📅 日期：</span>
        <span class="value">{{ formatDate(getDateFromItem(data)) }}</span>
      </div>

      <el-divider></el-divider>

      <div class="metric-row">
        <span class="label">心率：</span>
        <div style="flex: 1;">
          <div>
            <span :style="{ color: isAbnormal(data.hr, 'hr') ? '#d32f2f' : '#1b5e20', fontWeight: isAbnormal(data.hr, 'hr') ? 'bold' : 'normal' }">
              {{ data.hr }} bpm
            </span>
            <span style="margin-left: 10px; font-size: 12px; color: #666;">（60-100 bpm）</span>
          </div>
          <div style="font-size: 13px; margin-top: 4px; color: #555;">
            状态：<span :style="{ color: isAbnormal(data.hr, 'hr') ? '#d32f2f' : 'inherit', fontWeight: isAbnormal(data.hr, 'hr') ? 'bold' : 'normal' }">
              {{ isAbnormal(data.hr, 'hr') ? '⚠️ ' + (data.hr < 60 ? '过低' : '过高') : '正常' }}
            </span>
          </div>
          <div v-if="isAbnormal(data.hr, 'hr')" style="color: #d32f2f; font-size: 13px; margin-top: 6px; font-style: italic;">
            💡 建议：{{ data.hr < 60 ? '建议适当增加有氧运动，如快走、慢跑，避免突然起身，必要时咨询医生。' : '建议保持情绪稳定，避免剧烈运动，监测血压，必要时就医。' }}
          </div>
        </div>
      </div>

      <div class="metric-row">
        <span class="label">收缩压：</span>
        <div style="flex: 1;">
          <div>
            <span :style="{ color: isAbnormal(data.sbp, 'sbp') ? '#d32f2f' : '#1b5e20', fontWeight: isAbnormal(data.sbp, 'sbp') ? 'bold' : 'normal' }">
              {{ data.sbp }} mmHg
            </span>
            <span style="margin-left: 10px; font-size: 12px; color: #666;">（90-140 mmHg）</span>
          </div>
          <div style="font-size: 13px; margin-top: 4px; color: #555;">
            状态：<span :style="{ color: isAbnormal(data.sbp, 'sbp') ? '#d32f2f' : 'inherit', fontWeight: isAbnormal(data.sbp, 'sbp') ? 'bold' : 'normal' }">
              {{ isAbnormal(data.sbp, 'sbp') ? '⚠️ ' + (data.sbp > 140 ? '偏高' : '偏低') : '正常' }}
            </span>
          </div>
          <div v-if="isAbnormal(data.sbp, 'sbp')" style="color: #d32f2f; font-size: 13px; margin-top: 6px; font-style: italic;">
            💡 建议：{{ data.sbp > 140 ? '建议低盐饮食、控制体重、规律作息，持续偏高需就医。' : '注意补充水分和盐分，避免长时间站立，可少量多餐。' }}
          </div>
        </div>
      </div>

      <div class="metric-row">
        <span class="label">舒张压：</span>
        <div style="flex: 1;">
          <div>
            <span :style="{ color: isAbnormal(data.dbp, 'dbp') ? '#d32f2f' : '#1b5e20', fontWeight: isAbnormal(data.dbp, 'dbp') ? 'bold' : 'normal' }">
              {{ data.dbp }} mmHg
            </span>
            <span style="margin-left: 10px; font-size: 12px; color: #666;">（60-90 mmHg）</span>
          </div>
          <div style="font-size: 13px; margin-top: 4px; color: #555;">
            状态：<span :style="{ color: isAbnormal(data.dbp, 'dbp') ? '#d32f2f' : 'inherit', fontWeight: isAbnormal(data.dbp, 'dbp') ? 'bold' : 'normal' }">
              {{ isAbnormal(data.dbp, 'dbp') ? '⚠️ ' + (data.dbp > 90 ? '偏高' : '偏低') : '正常' }}
            </span>
          </div>
          <div v-if="isAbnormal(data.dbp, 'dbp')" style="color: #d32f2f; font-size: 13px; margin-top: 6px; font-style: italic;">
            💡 建议：{{ data.dbp > 90 ? '舒张压偏高常见于中青年，建议减重、减压、限酒，定期监测。' : '若无不适可观察，注意营养均衡；若头晕乏力，建议就医。' }}
          </div>
        </div>
      </div>

      <div class="metric-row">
        <span class="label">血糖：</span>
        <div style="flex: 1;">
          <div>
            <span :style="{ color: isAbnormal(data.glucose, 'glucose') ? '#d32f2f' : '#1b5e20', fontWeight: isAbnormal(data.glucose, 'glucose') ? 'bold' : 'normal' }">
              {{ data.glucose }} mmol/L
            </span>
            <span style="margin-left: 10px; font-size: 12px; color: #666;">（3.9-6.1 mmol/L）</span>
          </div>
          <div style="font-size: 13px; margin-top: 4px; color: #555;">
            状态：<span :style="{ color: isAbnormal(data.glucose, 'glucose') ? '#d32f2f' : 'inherit', fontWeight: isAbnormal(data.glucose, 'glucose') ? 'bold' : 'normal' }">
              {{ isAbnormal(data.glucose, 'glucose') ? '⚠️ ' + (data.glucose < 3.9 ? '过低' : '过高') : '正常' }}
            </span>
          </div>
          <div v-if="isAbnormal(data.glucose, 'glucose')" style="color: #d32f2f; font-size: 13px; margin-top: 6px; font-style: italic;">
            💡 建议：{{ data.glucose < 3.9 ? '立即补充含糖食物（如糖果、果汁），避免空腹过久。' : '注意饮食控制，减少精制糖摄入，加强运动，必要时检测糖化血红蛋白。' }}
          </div>
        </div>
      </div>

      <div class="metric-row">
        <span class="label">睡眠：</span>
        <div style="flex: 1;">
          <div>
            <span :style="{ color: isAbnormal(data.sleep, 'sleep') ? '#d32f2f' : '#1b5e20', fontWeight: isAbnormal(data.sleep, 'sleep') ? 'bold' : 'normal' }">
              {{ data.sleep }} 小时
            </span>
            <span style="margin-left: 10px; font-size: 12px; color: #666;">（7-9 小时）</span>
          </div>
          <div style="font-size: 13px; margin-top: 4px; color: #555;">
            状态：<span :style="{ color: isAbnormal(data.sleep, 'sleep') ? '#d32f2f' : 'inherit', fontWeight: isAbnormal(data.sleep, 'sleep') ? 'bold' : 'normal' }">
              {{ isAbnormal(data.sleep, 'sleep') ? '⚠️ ' + (data.sleep < 7 ? '不足' : (data.sleep > 9 ? '过多' : '正常')) : '正常' }}
            </span>
          </div>
          <div v-if="isAbnormal(data.sleep, 'sleep')" style="color: #d32f2f; font-size: 13px; margin-top: 6px; font-style: italic;">
            💡 建议：{{ data.sleep < 7 ? '建议规律作息，睡前避免使用电子设备，营造安静睡眠环境。' : '可能与疲劳、抑郁有关，建议适度活动，保持生活节奏。' }}
          </div>
        </div>
      </div>

      <div class="metric-row">
        <span class="label">步数：</span>
        <div style="flex: 1;">
          <div>
            <span :style="{ color: isAbnormal(data.steps, 'steps') ? '#d32f2f' : '#1b5e20', fontWeight: isAbnormal(data.steps, 'steps') ? 'bold' : 'normal' }">
              {{ data.steps }} 步
            </span>
            <span style="margin-left: 10px; font-size: 12px; color: #666;">（≥5000 步）</span>
          </div>
          <div style="font-size: 13px; margin-top: 4px; color: #555;">
            状态：<span :style="{ color: isAbnormal(data.steps, 'steps') ? '#d32f2f' : 'inherit', fontWeight: isAbnormal(data.steps, 'steps') ? 'bold' : 'normal' }">
              {{ isAbnormal(data.steps, 'steps') ? '⚠️ 不足' : '良好' }}
            </span>
          </div>
          <div v-if="isAbnormal(data.steps, 'steps')" style="color: #d32f2f; font-size: 13px; margin-top: 6px; font-style: italic;">
            💡 建议：建议每日增加步行量，如饭后散步30分钟，逐步达到5000步以上。
          </div>
          <div v-else style="color: #1b5e20; font-size: 13px; margin-top: 6px; font-style: italic;">
            💡 建议：继续保持，有助于心肺健康和体重管理！
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'HealthDataDetail',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: null
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },

    // 异常检测函数
    isAbnormal(val, type) {
      if (type === 'hr') return val > 100 || val < 60
      if (type === 'sbp') return val > 140
      if (type === 'dbp') return val > 90 || val < 60
      if (type === 'glucose') return val > 6.1 || val < 3.9
      if (type === 'sleep') return val < 6
      if (type === 'steps') return val < 5000
      return false
    },

    // 获取日期对象
    getDateFromItem(item) {
      return new Date(item.time)
    },

    // 格式化日期
    formatDate(date) {
      return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日 ' +
        date.getHours().toString().padStart(2, '0') + ':' +
        date.getMinutes().toString().padStart(2, '0') + ':' +
        date.getSeconds().toString().padStart(2, '0')
    }
  }
}
</script>

<style scoped>
.popup-content {
  padding: 10px;
}

.popup-content .metric-row {
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
}

.popup-content .label {
  font-weight: 600;
  color: #606266;
  width: 100px;
}

.popup-content .value {
  color: #303133;
  flex: 1;
  font-weight: 500;
}
</style>
